<template>
  <div>
    <div class="title">
      <el-row>
        <el-col :span="1" style="width: 50px;">
          <span style="color:#757575;">位置 :</span>
        </el-col>
        <el-col :span="20">
          <span @click="tableShow" style="cursor:pointer;" :class="{text : active}">简历筛选</span>
          <span v-if="unpush" :class="{text : unpush}">>未推送简历</span>
          <span v-if="upload" :class="{text : upload}">>上传</span>
        </el-col>
      </el-row>
    </div>
    <div class="posttable" v-show="active">
      <el-row type="flex" justify="center">
        <el-col :span="23" class="screenresume">
          <div style="margin-bottom:20px;float: right;">
            <el-row type="flex" justify="space-between" style="margin-top: 11px;">
              <el-select v-model="time" placeholder="请选择客户" style="width: 142px;margin-right: 10px;"
                         @change="customerChange">
                <el-option v-for="item in timelist" :key="item.id" :value="item.name" :label="item.name"></el-option>
              </el-select>
              <el-select v-model="position" placeholder="请选择需求编号" style="width: 142px;margin-right: 10px;height: 30px;"
                         @change="noChange">
                <el-option v-for="item in positionlist" :key="item" :value="item" :label="item"></el-option>
              </el-select>
              <el-input v-model="work" round size="mini" @change="workChange" @keydown.enter="workChange"
                        placeholder="请输入职位" style="width: 142px;margin-right: 10px;height: 30px;"></el-input>
              <el-input v-model="workage" round size="mini" @change="workageChange" @keydown.enter="workageChange"
                        placeholder="请输入工作年限" style="width: 142px;margin-right: 10px;height: 30px;"></el-input>
              <el-input v-model="education" round size="mini" @change="educationChange" @keydown.enter="educationChange"
                        placeholder="请输入学历要求" style="width: 142px;margin-right: 10px;height: 30px;"></el-input>
              <div style="margin-left: 5px;">
                <el-button
                  class="back"
                  size="small"
                  round
                  @click="uploadClick"
                >新增
                </el-button>
                <el-button
                  class="unpush"
                  size="small"
                  round
                  @click="unPush"
                >不推送
                </el-button>
              </div>
            
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="23">
          <el-table
            :data="tableData"
            highlight-current-row
            @current-change="currentChange"
            ref="singleTable"
            style="width: 100%">
            <el-table-column
              label="姓名"
            >
              <template slot-scope="scope">
                <span style='color: #757575;'>{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="简历来源"
              prop="type"
            >
            </el-table-column>
            <el-table-column
              label="查看简历"
              width="80"
            >
              <template slot-scope="props">
                <span style="color:#1198ff;cursor:pointer;" @click="watchResume(props.row.domHtml)">查看简历</span>
              </template>
            </el-table-column>
            <el-table-column
              label="联系电话"
            >
              <template slot-scope="props">
                <div v-if="props.row.tel">
                  <span v-if="props.row.tel.indexOf('http') == -1">{{props.row.tel}}</span>
                  <a v-else :href="props.row.tel" target="_Blank">电话链接</a>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="职位"
              prop="jobHunting"
            >
            </el-table-column>
            <el-table-column
              label="工作年限"
              prop="jobTime"
            >
            </el-table-column>
            <el-table-column
              label="学校"
              prop="school"
            >
            </el-table-column>
            <el-table-column
              label="学历"
              prop="education"
            >
            </el-table-column>
            <el-table-column
              label="专业"
              prop="major"
            >
            </el-table-column>
            <el-table-column
              label="期望薪资"
              prop="salaryExpectation"
            >
            </el-table-column>
            <el-table-column
              label="匹配度"
              prop="matchingDegree"
              v-if="hasNonum"
            >
            </el-table-column>
            <el-table-column type="expand" width="100" label="功能区">
              <template slot-scope="props">
                <div style="color: #4bb2fc;padding-left: 68px;width: 100%;float: left;text-align: left;">
                  <span>{{props.row.sex}} | </span>
                  <span>{{props.row.age}} | </span>
                  <span v-if="props.row.currentResidence">{{props.row.currentResidence}} | </span>
                  <span>{{props.row.education}}</span>
                </div>
                <div class="container">
                  <div>{{props.row.educationExperience}}</div>
                  <div v-for="(item,index) in props.row.work" :key="index">{{item}}</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="pager">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="pagehandleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5,10,15]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalcount"
            ></el-pagination>
          </div>
        </el-col>
      </el-row>
      <el-dialog
        title="错误"
        :visible.sync="editdialogVisible"
        width="30%"
        :before-close="handleClose"
        class="deletedialog"
      >
        <div style="text-align: center">
          <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
            <span style="font-size: 16px;color: #333;margin-left: 12px;">尚未选择任何简历</span>
          </i>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button class="sure" round @click="handleClose">确 定</el-button>
          <el-button round @click="handleClose" class="cancel">取 消</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="简历"
        class="resume screenresume1"
        :visible.sync="dialogVisible"
        :before-close="diaClose"
      >
        <div v-html="textHtml">
        
        </div>
      </el-dialog>
    </div>
    <unpush-resume v-if="unpush" :row="currentRow" @cancel="cancelPush"></unpush-resume>
    <upload-resume v-if="upload" :row="currentRow" @cancel="cancelUpload"></upload-resume>
  </div>
</template>
<script>
  import axios from 'axios'
  import qs from 'qs'
  import unpushResume from './unpushresume'
  import uploadResume from './uploadresume'
  
  export default {
    name: "screenresume",
    data() {
      return {
        currentRow: null,
        editdialogVisible: false,
        time: '',
        timelist: [],
        position: '',
        positionlist: [],
        work: '',
        workage: '',
        education: '',
        tableData: [],
        currentPage: 1,
        totalcount: 0,
        pagesize: 15,
        active: true,
        unpush: false,
        upload: false,
        dialogVisible: false,
        hasNonum: false,
        textHtml: "",
        flag : "0"
      }
    },
    created() {
      axios.post(this.url + '/resumeUpload/getCustomerNames').then(res => {
        this.unlogin(res.data.code)
        if (res.data.code == 200) {
          this.timelist = res.data.data;
        }
      });
      axios.post(this.url + "/screening/getresume", {
        consition: "",
        flag: "0",
        pageNum: this.currentPage,
        pageSize: this.pagesize
      })
        .then(res => {
          this.unlogin(res.data.code)
          if (res.data.code == 200) {
            this.tableData = res.data.data.list;
            this.totalcount = res.data.data.total;
            this.tableData.forEach((data, index) => {
              if (data.school == null) {
                data.school = data.educationExperience ? data.educationExperience.match(/\W{1,20}(学院|大学)/g) : ""
              }
              if (data.workExperience !== null) {
                data.work = data.workExperience ? data.workExperience.match(/20[0-9][0-9]([\d\D]){2,50}(有限公司|分公司)/g) : ""
              } else {
                data.work = null
              }
            })
          }
        })
    },
    methods: {
      customerChange(val) {
        axios.post(this.url + '/resumeUpload/getNoByCustomerName', qs.stringify({
          customerName: val
        })).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.positionlist = res.data.data;
            this.flag = "1";
          }
        });
      },
      noChange(val) {
        this.hasNonum = true;
        this.currentPage = 1;
        axios.post(this.url + "/screening/getresume", {
          education: this.education,
          jobTime: this.workage,
          jobHunting: this.work,
          no: val,
          flag: this.flag,
          pageNum: this.currentPage,
          pageSize: this.pagesize
        })
          .then(res => {
            this.unlogin(res.data.code)
            if (res.data.code == 200) {
              this.tableData = res.data.data.list;
              this.totalcount = res.data.data.total;
              this.tableData.forEach((data, index) => {
                if (data.school == null) {
                  data.school = data.educationExperience ? data.educationExperience.match(/\W{1,20}(学院|大学)/g) : ""
                }
                if (data.workExperience !== null) {
                  data.work = data.workExperience ? data.workExperience.match(/20[0-9][0-9]([\d\D]){2,50}(有限公司|分公司)/g) : ""
                } else {
                  data.work = null
                }
              })
            }
          })
      },
      handleSizeChange(val) {
        this.pagesize = val;
        axios.post(this.url + "/screening/getresume", {
          education: this.education,
          jobTime: this.workage,
          jobHunting: this.work,
          no: this.position,
          flag: this.flag,
          pageNum: this.currentPage,
          pageSize: this.pagesize
        })
          .then(res => {
            this.unlogin(res.data.code)
            if (res.data.code == 200) {
              this.tableData = res.data.data.list;
              this.totalcount = res.data.data.total;
              this.tableData.forEach((data, index) => {
                if (data.school == null) {
                  data.school = data.educationExperience ? data.educationExperience.match(/\W{1,20}(学院|大学)/g) : ""
                }
                if (data.workExperience !== null) {
                  data.work = data.workExperience ? data.workExperience.match(/20[0-9][0-9]([\d\D]){2,50}(有限公司|分公司)/g) : ""
                } else {
                  data.work = null
                }
              })
            }
          })
      },
      pagehandleCurrentChange(val) {
        this.currentPage = val;
        axios.post(this.url + "/screening/getresume", {
          education: this.education,
          jobTime: this.workage,
          jobHunting: this.work,
          no: this.position,
          flag: this.flag,
          pageNum: this.currentPage,
          pageSize: this.pagesize
        })
          .then(res => {
            this.unlogin(res.data.code)
            if (res.data.code == 200) {
              this.tableData = res.data.data.list;
              this.totalcount = res.data.data.total;
              this.tableData.forEach((data, index) => {
                if (data.school == null) {
                  data.school = data.educationExperience ? data.educationExperience.match(/\W{1,20}(学院|大学)/g) : ""
                }
                if (data.workExperience !== null) {
                  data.work = data.workExperience ? data.workExperience.match(/20[0-9][0-9]([\d\D]){2,50}(有限公司|分公司)/g) : ""
                } else {
                  data.work = null
                }
              })
            }
          })
      },
      currentChange(val) {
        this.currentRow = val
      },
      uploadClick() {
        if (this.currentRow) {
          this.active = false;
          this.upload = true;
          
        } else {
          this.editdialogVisible = true;
          document.documentElement.style.overflow = "hidden";
        }
      },
      unPush() {
        if (this.currentRow) {
          this.active = false;
          this.unpush = true;
        } else {
          this.editdialogVisible = true;
          document.documentElement.style.overflow = "hidden";
        }
      },
      tableShow() {
        this.active = true;
        this.unpush = false;
        this.upload = false;
        this.$refs.singleTable.setCurrentRow();
      },
      cancelPush() {
        this.active = true;
        this.unpush = false;
        axios.post(this.url + "/screening/getresume", {
          education: this.education,
          jobTime: this.workage,
          jobHunting: this.work,
          no: this.position,
          flag: this.flag,
          pageNum: this.currentPage,
          pageSize: this.pagesize
        })
          .then(res => {
            this.unlogin(res.data.code)
            if (res.data.code == 200) {
              this.tableData = res.data.data.list;
              this.totalcount = res.data.data.total;
              this.tableData.forEach((data, index) => {
                if (data.school == null) {
                  data.school = data.educationExperience ? data.educationExperience.match(/\W{1,20}(学院|大学)/g) : ""
                }
                if (data.workExperience !== null) {
                  data.work = data.workExperience ? data.workExperience.match(/20[0-9][0-9]([\d\D]){2,50}(有限公司|分公司)/g) : ""
                } else {
                  data.work = null
                }
              })
            }
          })
        this.$refs.singleTable.setCurrentRow();
      },
      cancelUpload() {
        this.active = true;
        this.upload = false;
        axios.post(this.url + "/screening/getresume", {
          education: this.education,
          jobTime: this.workage,
          jobHunting: this.work,
          no: this.position,
          flag: this.flag,
          pageNum: this.currentPage,
          pageSize: this.pagesize
        })
          .then(res => {
            this.unlogin(res.data.code)
            if (res.data.code == 200) {
              this.tableData = res.data.data.list;
              this.totalcount = res.data.data.total;
              this.tableData.forEach((data, index) => {
                if (data.school == null) {
                  data.school = data.educationExperience ? data.educationExperience.match(/\W{1,20}(学院|大学)/g) : ""
                }
                if (data.workExperience !== null) {
                  data.work = data.workExperience ? data.workExperience.match(/20[0-9][0-9]([\d\D]){2,50}(有限公司|分公司)/g) : ""
                } else {
                  data.work = null
                }
              })
            }
          })
        this.$refs.singleTable.setCurrentRow();
      },
      diaClose() {
        document.documentElement.style.overflow = "auto";
        this.dialogVisible = false;
      },
      watchResume(val) {
        this.textHtml = val
        this.dialogVisible = true;
        document.documentElement.style.overflow = "hidden";
      },
      handleClose() {
        this.editdialogVisible = false;
        document.documentElement.style.overflow = "auto"
      },
      workChange() {
        this.currentPage = 1;
        axios.post(this.url + "/screening/getresume", {
          education: this.education,
          jobTime: this.workage,
          jobHunting: this.work,
          no: this.position,
          flag: this.flag,
          pageNum: this.currentPage,
          pageSize: this.pagesize
        })
          .then(res => {
            this.unlogin(res.data.code)
            if (res.data.code == 200) {
              this.tableData = res.data.data.list;
              this.totalcount = res.data.data.total;
              this.tableData.forEach((data, index) => {
                if (data.school == null) {
                  data.school = data.educationExperience ? data.educationExperience.match(/\W{1,20}(学院|大学)/g) : ""
                }
                if (data.workExperience !== null) {
                  data.work = data.workExperience ? data.workExperience.match(/20[0-9][0-9]([\d\D]){2,50}(有限公司|分公司)/g) : ""
                } else {
                  data.work = null
                }
              })
            }
          })
      },
      workageChange() {
        this.currentPage = 1;
        axios.post(this.url + "/screening/getresume", {
          education: this.education,
          jobTime: this.workage,
          jobHunting: this.work,
          no: this.position,
          flag: this.flag,
          pageNum: this.currentPage,
          pageSize: this.pagesize
        })
          .then(res => {
            this.unlogin(res.data.code)
            if (res.data.code == 200) {
              this.tableData = res.data.data.list;
              this.totalcount = res.data.data.total;
              this.tableData.forEach((data, index) => {
                if (data.school == null) {
                  data.school = data.educationExperience ? data.educationExperience.match(/\W{1,20}(学院|大学)/g) : ""
                }
                if (data.workExperience !== null) {
                  data.work = data.workExperience ? data.workExperience.match(/20[0-9][0-9]([\d\D]){2,50}(有限公司|分公司)/g) : ""
                } else {
                  data.work = null
                }
              })
            }
          })
      },
      educationChange() {
        this.currentPage = 1;
        axios.post(this.url + "/screening/getresume", {
          education: this.education,
          jobTime: this.workage,
          jobHunting: this.work,
          no: this.position,
          flag: this.flag,
          pageNum: this.currentPage,
          pageSize: this.pagesize
        })
          .then(res => {
            this.unlogin(res.data.code)
            if (res.data.code == 200) {
              this.tableData = res.data.data.list;
              this.totalcount = res.data.data.total;
              this.tableData.forEach((data, index) => {
                if (data.school == null) {
                  data.school = data.educationExperience ? data.educationExperience.match(/\W{1,20}(学院|大学)/g) : ""
                }
                if (data.workExperience !== null) {
                  data.work = data.workExperience ? data.workExperience.match(/20[0-9][0-9]([\d\D]){2,50}(有限公司|分公司)/g) : ""
                } else {
                  data.work = null
                }
              })
            }
          })
      }
    },
    components: {
      unpushResume,
      uploadResume
    }
  }
</script>
<style scoped>
  .title {
    background-color: #fff;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    padding-left: 20px;
    margin-top: 6px;
    margin-bottom: 6px;
  }
  
  .text {
    color: #1099ff;
  }
  
  .posttable {
    min-height: 700px;
    background-color: #fff;
  }
  
  .tabletitle {
    margin-left: 20px;
    height: 50px;
    line-height: 50px;
  }
  
  .back {
    width: 65px;
    height: 28px;
    padding: 7px 15px !important;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #5696f8 0%, #143dea 100%);
  }
  
  .unpush {
    width: 65px;
    height: 28px;
    padding: 7px 15px !important;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #56ebf8 0%, #14caea 100%);
  }
  
  .pager {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  
  .el-pagination {
    margin-left: 50%;
    transform: translateX(-50%);
  }
  
  .container {
    text-align: left;
    padding-left: 67px;
    width: 100%;
    min-height: 100px;
  }
  
  .container div {
    margin-right: 20px;
  }
  
  a {
    text-decoration: none;
    color: #1099ff;
  }

</style>
